<template>
  <div class="page">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body">
              <div class="layui-form" lay-filter>
                <div class="layui-form-item">
                  <label class="layui-form-label">活动名称</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="name"
                      placeholder="输入活动名称"
                      v-model="itemData.name"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>

                 <div class="layui-form-item">
                  <label class="layui-form-label">区域</label>
                  <div class="layui-input-inline" style="width:150px">
                    <select name="country" lay-filter="country" v-model="itemData.provinceId">
                      <option v-for="(item,index) in country" :value="item.id" :key="index">{{item.name}}</option>
                    </select>
                  </div>
                  <div class="layui-input-inline" style="width:150px">
                    <select name="province" lay-filter="province" v-model="itemData.cityId">
                      <option v-for="(items,indexs) in province" :value="items.id" :key="indexs">{{items.name}}</option>
                    </select>
                  </div>
                  <div class="layui-input-inline" style="width:150px">
                    <select name="city" lay-filter="city" v-model="itemData.areaId">
                      <option v-for="(itemss,indexss) in city" :value="itemss.id" :key="indexss">{{itemss.name}}</option>
                    </select>
                  </div>
                  <div class="layui-input-inline" style="width:150px">
                    <select name="area" lay-filter="area" v-model="itemData.districtId">
                      <option v-for="(itemsss,indexsss) in area" :value="itemsss.id" :key="indexsss">{{itemsss.name}}</option>
                    </select>
                  </div>
                </div>
                
                 <div class="layui-form-item">
                  <label class="layui-form-label">活动地址</label>
                  <div class="layui-input-block" style="width: 470px;">
                    <input
                      type="text"
                      name="activityAddress"
                      placeholder='请输入活动地址'
                      v-model="itemData.activityAddress"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">行业类型</label>
                  <div class="layui-input-inline">
                    <select name="category" lay-filter="category" v-model="itemData.category.id">
                      <option v-for="(item,index) in catelist" :value="item.id" :key="index">{{item.name}}</option>
                    </select>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">商品图片</label>
                    <div class="layui-input-inline" style="width: 180px;">
                      <div class="layui-upload">
                        <button
                          type="button"
                          class="layui-btn"
                          id="layuiadmin-upload-useradmin"
                        >选择文件</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">图片预览</label>
                    <div class="layui-input-inline" style="width: 180px;">
                      <img
                        id="img"
                        :src="
                          itemData.logo
                            ? itemData.logo
                            : require('@/assets/zwyl.jpg')
                        "
                        style="width:100px;height:100px;"
                      />
                    </div>
                  </div>
                </div>


                <div class="layui-form-item">
                  <label class="layui-form-label">市场价(元)</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="basePrice"
                      placeholder="请输入价格"
                      v-model="itemData.basePrice"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">人均消费(元)</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="number"
                      name="perConsumptionPrice"
                      placeholder
                      v-model="itemData.perConsumptionPrice"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                
                     <div class="layui-form-item">
                  <label class="layui-form-label">人数(人)</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="number"
                      name="numberPeople"
                      placeholder
                      v-model="itemData.numberPeople"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                      <input
                        type="text"
                        name="beginAt"
                        class="layui-input"
                        id="test3"
                        placeholder="年-月-日-时-分-秒"
                        v-model="itemData.startAt"
                      />
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                      <input
                        type="text"
                        name="expireAt"
                        class="layui-input"
                        id="test4"
                        placeholder="年-月-日-时-分-秒"
                        v-model="itemData.finishAt"
                      />
                    </div>
                  </div>
                </div>

                
                <div class="layui-form-item">
                  <label class="layui-form-label">活动描述</label>
                  <div class="layui-input-block">
                    <textarea
                      placeholder="请输入内容"
                      class="layui-textarea"
                      v-model="itemData.projectDescription.consumerGuide"
                    ></textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">购买须知</label>
                  <div class="layui-input-block">
                    <textarea
                      placeholder="请输入内容"
                      class="layui-textarea"
                      v-model="itemData.projectDescription.introduction"
                    ></textarea>
                  </div>
                </div>


                <div class="layui-form-item">
                  <label class="layui-form-label">活动图片</label>
                  <div class="layui-input-block">
                    <div class="layui-upload">
                      <button type="button" class="layui-btn" id="test2">多图片上传</button>
                      <blockquote
                          class="layui-elem-quote layui-quote-nm"
                          style="margin-top: 10px;"
                        >
                          <div class="layui-upload-list uploader-list">
                            <div class="li" v-for="(item,index) in imgstr" :key="index">
                              <img class="close" @click="del(index)" src="../../../assets/delete.png"/>
                              <img class="mapimg" :src="item" />
                            </div>
                          </div>
                        </blockquote>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button
                      class="layui-btn layui-btn-normal"
                      lay-submit
                      lay-filter="setmyinfo"
                      @click="confirmOk"
                    >确认</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "activityadd",
  data() {
    return {
      id: "",
      itemData: {
        name: "", //商品名称
        logo: "", //商品图片
        category:{
          id:""
        },
        basePrice: "", //市场价
        numberPeople:"",//人数
        projectDescription: {
          consumerGuide: "",
          introduction: "",
          pic: "",
        }, //活动详情和须知
        perConsumptionPrice: "", //人均消费(元)
        finishAt: "", //活动结束时间
        startAt: "", //活动开始时间
        areaId :"",//县
        cityId :'',//区
        districtId:'',//市
        provinceId:'',//省
        activityAddress:''
        
      },
      imgstr: [],
      imgli:[],
      country:[],
      province:[],
      city:[],
      area:[],
      catelist:[],
    };
  },
  mounted() {
        window.getdates = this.getdates;
    var _this = this;
    layui.use(["upload", "laydate"], function () {
      var upload = layui.upload,
        laydate = layui.laydate;
      laydate.render({
        elem: "#test3",
        type: "datetime",
        done: function (value) {
          _this.itemData.startAt = value;
        },
      });
      laydate.render({
        elem: "#test4",
        type: "datetime",
        done: function (value) {
          _this.itemData.finishAt = value;
        },
      });
      var uploadInst = upload.render({
        elem: "#layuiadmin-upload-useradmin", //绑定元素
        data: {
          type: 2,
        },
        url: imguploadurl, //上传接口
        done: function (res) {
          layer.msg("上传成功");
          _this.itemData.logo = res.msg;
        },
        error: function () {
          layer.msg("上传失败");
        },
      });
      upload.render({
        elem: "#test2",
        data: {
          type: 2,
        },
        url: "http://storage.g2ma.com/imgUpload/multi",
        multiple: true,
        before: function (obj) {},
        done: function (res, index) {
          layer.msg("上传成功");
          // var imgs = "<img src='" + res.msg + "' />";
          var str = _this.imgstr;
          str.push(res.msg);
          this.imgstr = str;
        },
      });
    });

    this.getcountry();
    this.getcategory();
    
  },
  methods: {
    getdates: function (data) {
      //回选详情
      var _this = this;

      var url = "/verify/aapi/v1.9/project/" + data.id;
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        _this.itemData = ret.data;
        _this.id = ret.data.id;
        _this.itemData.perConsumptionPrice = ret.data.perConsumptionPrice / 100;
        _this.itemData.basePrice = ret.data.basePrice / 100;
        var finishAt = ret.data.finishAt;
        var startAt = ret.data.startAt;
        _this.itemData.finishAt = FormatDate(finishAt, 3);
        _this.itemData.startAt = FormatDate(startAt, 3);

      if(ret.data.projectDescription.pic!=null && ret.data.projectDescription.pic!=''){
        var pic = []
        var src = ret.data.projectDescription.pic;
          if (src.indexOf(",") > 0) {
              pic = src.split(",");
              _this.imgstr = pic;
            } else {
              pic[0] = src;
              _this.imgstr = pic;
            }
      }
      _this.getprovince(_this.itemData.provinceId)
      _this.getcity(_this.itemData.cityId)
      _this.getarea(_this.itemData.areaId)
      _this.getcategory(_this.itemData.districtId)
      });
      
    },
    del: function (index) {
      var _this = this;
      var arr = _this.imgstr;
      arr.splice(index, 1);
      _this.imgstr = arr;
    },
    confirmOk: function () {
      var _this = this;
      // if (!this.itemData.logol) {
      //   layer.msg("请上传商品图片");
      //   return false;
      // }
      //		if(!this.itemData.detailcontent){
      //			layer.msg('请上传商品详情图片');
      //			return false;
      //		}

      var hat = "POST";
      var dates = this.itemData;
      dates.projectDescriptionDTO = _this.itemData.projectDescription
      dates.projectDescriptionDTO.pic = String(_this.imgstr);
      dates.perConsumptionPrice = _this.itemData.perConsumptionPrice * 100;
      dates.basePrice = _this.itemData.basePrice * 100;
      var finishAt = _this.itemData.finishAt;
      var startAt = _this.itemData.startAt;
      _this.itemData.finishAt = getsjc(finishAt);
      _this.itemData.startAt = getsjc(startAt);
      if (_this.id) {
        dates.id = _this.id;
        hat = "PUT";
      }
      var url = "/verify/aapi/v1.9/project";
      // alert(JSON.stringify(dates))
      ajaxRequest(url, hat, "json", dates, function (ret, err) {
        layer.msg("操作成功");
        setTimeout(function () {
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
            // parent.location.reload();
        }, 1000);
      });
    },
    getcountry:function () {
      var _this = this;
      var url = "/shop/papi/v1.9/region/findByParent/144";
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        _this.country = ret.data;
      });
    },
    getprovince:function (id) {
      var _this = this;
      var url = "/shop/papi/v1.9/region/findByParent/" + id;
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        _this.province = ret.data;

      });
    },
    getcity:function (id) {
      var _this = this;
      var url = "/shop/papi/v1.9/region/findByParent/" + id;
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        _this.city = ret.data;
      });
    },
     getarea:function (id) {
      var _this = this;
      var url = "/shop/papi/v1.9/region/findByParent/" + id;
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        _this.area = ret.data;
      });
    },
    getcategory:function () {
      var _this = this;
      var url = "/verify/papi/v1.9/project/list/category";
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        _this.catelist = ret.data;
      });
    },
  },
  
  updated: function () {
    var _this = this;
    layui.use("form", function () {
      var form = layui.form;
      form.render();
      form.on("select(country)", function (data) {
        _this.itemData.provinceId = data.value;
        _this.itemData.areaId =''
        _this.itemData.districtId =''
        _this.city = []
        _this.area = []
        _this.getprovince(data.value)
      });
      form.on("select(province)", function (data) {
        _this.itemData.cityId = data.value;
        _this.itemData.districtId =''
         _this.area = []
        _this.getcity(data.value)
      });
      form.on("select(city)", function (data) {
        _this.itemData.areaId = data.value;
        _this.getarea(data.value)
      });
      form.on("select(area)", function (data) {
        _this.itemData.districtId = data.value;
      });
      form.on("select(category)", function (data) {
       _this.itemData.category.id = data.value;
      });
    });
  },
};
</script>
<style>
.layui-form-label {
  width: 90px;
  font-size: 15px;
}
.layui-input-block {
  margin-left: 120px;
}
.uploader-list {
  margin-left: -15px;
}

.uploader-list .li {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-left: 15px;
}
.li .mapimg {
  width: 100px;
  height: 100px;
  position: absolute;
}
.li .close {
  position: relative;
  width: 15px;
  left: 8px;
  bottom: 10px;
  float: right;
  z-index: 1000;
}
</style>